<!--
 (c) Copyright Ascensio System SIA 2020

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<!DOCTYPE html>

<head>
    <title>Zoom WebSDK</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="vendor/select2-4.0.6-rc.1/dist/css/select2.css" />
    <script src="vendor/select2-4.0.6-rc.1/dist/js/select2.js"></script>
    <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/react-select.css" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
</head>

<body id="body">
    <style>
        body, html {
            font-size: 11px !important;
            min-height: 100% !important;
            height: 100%;
            min-width: 100% !important;
            width: 100%;
            font-family: "Arial" !important;
            line-height: normal !important;
        }

        .sdk-select {
            height: 34px;
            border-radius: 4px;
        }

        #nav-tool {
            margin-bottom: 0px;
        }

        #show-test-tool {
            float:bottom;
            top: 100px;
            left: 0;
            display: block;
            z-index: 99999;
        }

        #display_name {
            width: 100%;
        }

        .btn-primary {
            margin-top: 5%;
        }

        #websdk-iframe {
            width: 100%;
            height: 100%;
            border: 1px;
            border-color: red;
            border-style: dashed;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            left: 50%;
            margin: 0;
        }

        .btn-text-default {
            min-height: 22px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40%;
            margin-top: 16px;
            text-align: center;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        label {
            font-size: 11px;
            margin-bottom: 0 !important;
            color: #f1f1f1;
        }
        .form-control {
            outline:0 !important;
        }
        input[type=text]:focus {
            outline: 0 !important;
        }
        .navbar-form {
            border-top: none;
            border-bottom: none;
            webkit-box-shadow: none;
            box-shadow: none;
            margin-top: 0;
            padding: 16px 12px !important;
            margin-bottom: 0px !important;
        }
        .navbar {
            border: none;
        }
        input,
        input::-webkit-input-placeholder {
            font-size: 11px;
            line-height: 3;
        }
        .noselect {
		  	-webkit-touch-callout: none; /* iOS Safari */
		  	-webkit-user-select: none;   /* Chrome/Safari/Opera */
		  	-khtml-user-select: none;    /* Konqueror */
		  	-moz-user-select: none;      /* Firefox */
		  	-ms-user-select: none;       /* Internet Explorer/Edge */
		  	user-select: none;           /* Non-prefixed version, currently
										 not supported by any browser */
		}
    </style>

    <div id="join_container" style="height: 100%;">
        <nav id="nav-tool" class="navbar navbar-inverse navbar-fixed-top" style="height: 100%;">
            <div class="container" style="height: 100%;">
                <div id="navbar" class="websdktest" style="height: 100%;">
                    <form class="navbar-form navbar-right" id="meeting_form" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative;">
                        <div>
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="display_name" id="display_name" data-id="zoom-display-name-id" value="" maxLength="100" placeholder="Name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Meeting ID</label>
                                <input type="text" name="meeting_number" id="meeting_number" value="" maxLength="200" style="width:150px" placeholder="Meeting Number" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Meeting password</label>
                                <input type="text" name="meeting_pwd" id="meeting_pwd" value="" style="width:150px" maxLength="32" placeholder="Meeting Password" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" name="meeting_email" id="meeting_email" value="" data-id="zoom-email-id" style="width:150px" maxLength="32" placeholder="Email option" class="form-control">
                            </div>
    
                            <div class="form-group">
                                <label>Meeting role</label>
                                <select id="meeting_role" class="sdk-select">
                                    <option value=0>Attendee</option>
                                    <option value=1>Host</option>
                                    <option value=5>Assistant</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Meeting region</label>
                                <select id="meeting_china" class="sdk-select">
                                    <option value=0>Global</option>
                                    <option value=1>China</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Meeting language</label>
                                <select id="meeting_lang" class="sdk-select">
                                    <option value="en-US">English</option>
                                    <option value="de-DE">German Deutsch</option>
                                    <option value="es-ES">Spanish Español</option>
                                    <option value="fr-FR">French Français</option>
                                    <option value="jp-JP">Japanese 日本語</option>
                                    <option value="pt-PT">Portuguese Portuguese</option>
                                    <option value="ru-RU">Russian Русский</option>
                                    <option value="zh-CN">Chinese 简体中文</option>
                                    <option value="zh-TW">Chinese 繁体中文</option>
                                    <option value="ko-KO">Korean 한국어</option>
                                    <option value="vi-VN">Vietnamese Tiếng Việt</option>
                                    <option value="it-IT">Italian italiano</option>
                                </select>
                            </div>
    
                            <input type="hidden" value="" id="copy_link_value" />
                            <div id="button_wrapper" style="display: flex; justify-content: space-between;">
                                <div type="submit" class="btn-text-default" id="join_meeting" onclick="window.joinMeeting('#joinMeeting')">Join</div>
                                <div type="button" link="" onclick="window.copyJoinLink('#copy_join_link')" class="btn-text-default" id="copy_join_link">Copy Direct join link</div>
                            </div>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-top: 16px;">
                            <div id="switch" style="z-index: 9999;">
                                <label class="switch-label noselect" style="cursor:pointer; border-bottom: 1px dashed #f1f1f1; z-index: 9999;">Schedule mode</label>
                            </div>
                            <div id="reconf" style="z-index: 9999;">
                                <label class="reconf-label noselect" style="cursor:pointer; border-bottom: 1px dashed #f1f1f1; z-index: 9999;">Reconfigure</label>
                            </div>
                        </div>

                    </form>
                </div>
                <!--/.navbar-collapse -->
            </div>
        </nav>
        <div id="show-test-tool">
            <button type="submit" class="btn btn-primary" id="show-test-tool-btn" title="show or hide top test tool">Show</button>
        </div>
    </div>
    <div id="iframe_meeting" style="width:100%; height:100%;margin:0;padding:0; display:none;"></div>


    <script>
        document.getElementById('show-test-tool-btn').addEventListener("click", function (e) {
            var textContent = e.target.textContent;
            if (textContent === 'Show') {
                document.getElementById('nav-tool').style.display = 'block';
                document.getElementById('show-test-tool-btn').textContent = 'Hide';
            } else {
                document.getElementById('nav-tool').style.display = 'none';
                document.getElementById('show-test-tool-btn').textContent = 'Show';
            }
        });
        window.addEventListener('message', function (msg) {
            if (typeof(msg.data) === "object")
            {
                var oTheme;
                //event for change theme
                if (msg.data.oTheme) {
                    oTheme = msg.data.oTheme;
                    var rule = ".form-control, .form-control[readonly], .form-control[disabled] { color : " + oTheme["text-normal"] + "; background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + ";}\n";
                    rule += ".form-control:focus { border-color : " + oTheme["border-control-focus"] + ";}\n";
                    rule += ".form-control[disabled] { color : " + oTheme["text-invers"] + ";}\n";

                    rule += ".btn-text-default { background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + "; color : " + oTheme["text-normal"] + ";}\n";
                    rule += ".btn-text-default:hover { background-color : " + oTheme["highlight-button-hover"] + ";}\n";
                    rule += ".btn-text-default:active { background-color : " + oTheme["highlight-button-pressed"] + " !important;}\n";
                    rule += ".btn-text-default[disabled]:hover,\
                    .btn-text-default.disabled:hover,\
                    .btn-text-default[disabled]:active,\
                    .btn-text-default[disabled].active,\
                    .btn-text-default.disabled:active,\
                    .btn-text-default.disabled.active: {background-color : " + oTheme["background-normal"] + " !important; color : " + oTheme["text-normal"] + ";}\n";

                    rule += ".select2-container--default .select2-selection--single { color : " + oTheme["text-normal"] + " !important; background-color : " + oTheme["background-normal"] + " !important;}\n";
                    rule += ".select2-container--default .select2-selection--single .select2-selection__rendered { color : " + oTheme["text-normal"] + " !important;}\n";
                    rule += ".select2-results { background-color : " + oTheme["background-normal"] + ";}\n";
                    rule += ".select2-container--default .select2-results__option--highlighted[aria-selected] { background-color : " + oTheme["border-regular-control"] + " !important;}\n";
                    rule += ".select2-container--default .select2-results__option[aria-selected=true] { color: " + oTheme["text-contrast-background"] + "!important; background-color : " + oTheme["border-regular-control"] + " !important;}\n";
                    rule += ".select2-dropdown, .select2-container--default .select2-selection--single { border-color : " + oTheme["border-regular-control"] + " !important;}\n";
                    rule += ".select2-container--default.select2-container--open .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
                    rule += ".select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single { border-color : " + oTheme["border-regular-control"] + " !important;}\n";
                    rule += ".select2-container--default.select2-container--open.select2-container--focus .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
                    rule += ".select2-search--dropdown { background-color : " + oTheme["background-normal"] + " !important;}\n";
                    rule += ".select2-container--default .select2-search--dropdown .select2-search__field { color : " + oTheme["text-normal"] + "; background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + ";}\n";
                    rule += ".select2-container--default.select2-container--disabled .select2-selection--single { background-color : " + oTheme["background-normal"] +";}\n";
                    rule += ".select2-container--default .select2-selection--single .select2-selection__arrow b { border-color : " + oTheme["text-normal"] + " !important" + ";}\n";
                    rule += ".select2-results__option { color : " + oTheme["text-normal"] + " !important" + ";}\n";

                    rule += ".ps .ps__rail-y:hover { background-color : " + oTheme["background-toolbar"] + ";}\n";
                    rule += ".ps .ps__rail-y.ps--clicking { background-color : " + oTheme["background-toolbar"] + ";}\n";
                    rule += ".ps__thumb-y { background-color : " + oTheme["background-normal"] + "; border-color:" + oTheme["Border"] + " !important" + ";}\n";
                    rule += ".ps__rail-y:hover > .ps__thumb-y { border-color : " + oTheme["canvas-scroll-thumb-hover"] + "; background-color : " + oTheme["canvas-scroll-thumb-hover"] + " !important" + ";}\n";
                    rule += ".ps .ps__rail-x:hover { background-color : " + oTheme["background-toolbar"] + ";}\n";
                    rule += ".ps .ps__rail-x.ps--clicking { background-color : " + oTheme["background-toolbar"] + ";}\n";
                    rule += ".ps__thumb-x { background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["Border"] + " !important" + ";}\n";
                    rule += ".ps__rail-x:hover > .ps__thumb-x { border-color : " + oTheme["canvas-scroll-thumb-hover"] + ";}\n";

                    rule += "*::-webkit-scrollbar-track { background : " + oTheme["background-normal"] + ";}\n";
                    rule += "*::-webkit-scrollbar-track:hover { background : " + oTheme["background-toolbar-additional"] + ";}\n";
                    rule += "*::-webkit-scrollbar-thumb { background-color : " + oTheme["background-toolbar"] + "; border-color : " + oTheme["border-regular-control"] + ";}\n";
                    rule += "*::-webkit-scrollbar-thumb:hover { background-color : " + oTheme["canvas-scroll-thumb-hover"] + ";}\n";

                    $('#nav-tool').css('background-color', oTheme["background-toolbar"]);
                    $("label").css('color', oTheme["text-normal"]);
                    $('.reconf-label, .switch-label, .label-settings').css('border-bottom', '1px dashed ' + oTheme["text-normal"]);
                    var styleTheme = document.createElement('style');
                    styleTheme.type = 'text/css';
                    styleTheme.innerHTML = rule;
                    document.getElementsByTagName('head')[0].appendChild(styleTheme);
                }
            }
        });
    </script>

    <script src="https://source.zoom.us/2.2.0/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/2.2.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.2.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.2.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.2.0/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-2.2.0.min.js"></script>
    <script src="vendor/zoom-sdk/tool.js"></script>
    <script src="vendor/zoom-sdk/meeting.js"></script>
    <script src="vendor/zoom-sdk/vconsole.min.js"></script>
    <script src="vendor/zoom-sdk/index.js"></script>
    
    <script>
        $('.sdk-select').select2({
            minimumResultsForSearch: Infinity,
            width : '100%',
        });
        var Ps = new PerfectScrollbar("#meeting_form", {suppressScrollX: true});
    </script>
</body>

</html>